<template>
	<div class="lietou-detail content">
		<div class="detail-bg"></div>
		<div class="lietou-right">
			<div class="lietou-detail-head">
				<h2 class="lietou-detail-h1">我的推广码</h2>
				<div class="lietou-msg">
					<div class="tuiguang-left">
						<img :src="imgUrl" ref="downimg" class="avatar"/>
						<el-button type="primary" class="download-btn" @click="downloadCode">下载二维码</el-button>
					</div>
					<div class="lietou-msg-right">
						<p>1.通过扫您的二维码加入的猎头将成为您的下线</p>
						<p>2.您的下线猎头推荐工人成功后奖励金的一部分将计入您的收益</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		name: 'LietouManage',
		data() {
			return {
				imgUrl:''
			}
		},
		computed: {
			...mapGetters([
				'token',
				'userinfo'
			])
		},
		async created() {
			console.log(this.userinfo)
		   this.loadData();
		},
		methods:{
			async loadData() {
			  const loading = this.$loading({
			    lock: true,
			    text: 'Loading',
			    spinner: 'el-icon-loading',
			    background: 'rgba(0, 0, 0, 0.5)'
			  });
			  try {
			    let res = await this.$http({
			      url: '/Home/Login/getAgentWxaCode',
			      method: 'post',
			      params: {
						"agent_id": this.userinfo.id
					}
			    });
			    this.imgUrl = res.data
			    loading.close();
			  } catch (e) {
			    console.log(e)
			    loading.close();
			  }
			},
			// 下载二维码
			downloadCode(){
				this.getUrlBase64(this.imgUrl).then(base64 => {
				  let a = document.createElement("a");
				  a.style.display = "none";
				  a.download = this.name;
				  a.href = base64;
				  document.body.appendChild(a);
				  a.click();
				});
			},
			getUrlBase64(url) {
				return new Promise(resolve => {						 
					let canvas = document.createElement("canvas");
					let ctx = canvas.getContext("2d");
					let img = new Image();
					img.setAttribute('crossOrigin', 'anonymous'); //允许跨域
					img.src = url;
					img.onload = function() {
						 canvas.width = img.width;
						 canvas.height = img.height;
						 ctx.drawImage(img, 0, 0,canvas.width, canvas.height);
						 let dataURL = canvas.toDataURL("image/png");
						 canvas = null;
						 resolve(dataURL);
				  };
				});
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.lietou-detail-h1{
		font-size:18px;
		font-weight: bold;
		padding:20px 24px 6px;
	}
	.lietou-detail{
		background-color: rgb(240, 242, 245);
		position: relative;
		
		.detail-bg {
		  position: fixed;
		  top: 0px;
		  left: 0;
		  bottom:0;
		  right: 0;
		  background: #f4f4f4;
		}
		
	}
	.lietou-detail-head{
		background-color: #fff;
		margin:12px 0 20px 0px;
		padding-bottom:25px;
		position: relative;
		min-width:800px;
	}
	.lietou-msg{
		width:600px;
		display: flex;
		margin-left:20px;
		.avatar{
			width:200px;
		}
		.download-btn{
			display: block;
			margin:6px 0 15px 40px;
		}
		.lietou-msg-right{
			width:400px;
			margin-left:30px;
			margin-top:36px;
			font-size:16px;
			p{
				line-height: 28px;
				margin:0 0 20px;
			}
		}
	}
</style>
